<script setup>
import {ref,onMounted} from 'vue'
const userMessage = ref('')
function btn(){
    if(userMessage.value==''){
        alert('用户名不能为空')
    }
    else{
        localStorage.setItem("userMessage", userMessage.value);
        document.getElementById("popUp").hidden = true
        document.getElementById("userDataHidden").style.display = "block"
        location.reload()
    }
    
}
function sc(){
    document.getElementById("gk").hidden = true
    document.getElementById("sc").hidden = false
}
function gkbtn(){
    document.getElementById("gk").hidden = false
    document.getElementById("sc").hidden = true
}
onMounted(() => {
    let cat = localStorage.getItem("userMessage");
    console.log(cat)
    if(cat!=null && cat!=''){
        document.getElementById("popUp").hidden = true
        document.getElementById("userDataHidden").style.display = "block"
    }
})
</script>

<template>
    <div class="userMain">
        <p class="a">a</p>
        <div id="popUp">
            <p class="title">账号登录</p>
            <p><input type="text" id="searchTxt"  placeholder="账号" v-model.lazy="userMessage"></p>
            <p><input type="text" id="searchTxt"  placeholder="密码"></p>
            <p><button class="btn" @click="btn">登录</button></p>
            <p class="xy"><input type="radio"/><a href="https://i.mgtv.com/account/c_protocol">同意 《个人信息保护政策》《服务协议》</a></p>
        </div>
        <div id="userDataHidden">
            <div class="userData">
                <div class="userHome">
                    <div>
                        <img src="../assets/4ac8c27cc785ab98fafe8f9e0ee04e3.jpg"/>
                        <p>名字</p>
                        <nav>
                            <p><RouterLink to="/todolist">todolist</RouterLink></p>
                            <p><RouterLink to="/MyProfile">MyProfile</RouterLink></p>
                        </nav>
                    </div>
                    <div></div>
                </div>
                <div class="history">
                    <p @click="gkbtn" class="p1">观看历史</p>
                    <p @click="sc">收藏</p>
                </div>
            </div>
            <div class="historyData">
                <img src="https://puui.qpic.cn/vupload/0/20190514_1557833836359_1fqpicnyvtg.png/0"/>
                <p id="gk">你还没有任何观看记录,不如试试主页推荐</p>
                <p id="sc" hidden>你还没有任何收藏记录,不如试试主页推荐</p>
            </div>
        </div>
        
    </div>
</template>

<style scoped>
#userDataHidden{
    display: none;
}
.historyData{
    float: right;
    margin-right: 20%;
}
.historyData p{
    letter-spacing: 2px;
    padding-top: 30px;
    padding-left: 0px;
    font-size: 12px;
    color: rgb(152, 152, 152);
}
.history{
    color: rgba(0, 0, 0, 0.785);
}
.p1{
    border-bottom: 1px rgb(197, 197, 197) solid;
}
.history p{
    padding-left: 40px ;
    padding-bottom: 20px;
    padding-top: 10px;
}
.userHome{
    width: 330px;
    height: 320px;
    background-image: url(../images/bg_default@2x.png);
    background-size: cover;
}
.userHome nav{
    margin-left: -15px;
}
.userData{
    float: left;
    margin-left: 10%;
    width: 330px;
    height: 453px;
    border-radius: 10px;
    background-color: #f4f4f4;
}
.userHome img{
    text-align: center;
    width: 100px;
    height: 100px;
    margin-top: 50px;
    margin-left: 115px;
    border-radius: 50%;
}
.userHome p{
    margin-top: 8px;
    margin-left: 145px;
}
.a{
    color: white;
}
.xy{
    font-size: 12px;
    margin-top:35px;
    margin-left: 14%;
    text-align: left;  
}
.xy a{
    text-decoration:none;
    color: rgb(158, 158, 158);
}
#searchTxt{
    padding-left: 20px;
    margin-top:24px;
    width: 280px;
    height: 46px;
    font-size: 16px;
    border-radius: 50px;
    border: 1px solid rgba(0, 0, 0, 0.235);
    background-color: white;
}
.btn{
    margin-top:24px;
    width: 300px;
    height: 50px;
    font-size: 16px;
    border-radius: 50px;
    border: 0;
    color: white;
    background: linear-gradient(to right, #ff6f00, #ffa516);
}
#popUp .title{
    color: rgb(89, 89, 89);
    text-align: center;
    padding-top: 30px ;
    margin-bottom: 30px;
    font-size: 20px;
}
#popUp{
    text-align: center;
    margin-left: 33%;
    margin-top: 5px;
    width: 34%;
    height: 90%;
    border-radius: 10px;
    border: 2px solid rgb(180, 180, 180);
    background-color: white;
}
#popUp p{
    margin-bottom: -20px;
}
.userMain{
    margin-top:80px;
    width: 100%;
    height: 85vh;
}
</style>